<template>
  <div class="backTop" @click="backTop" style="visibility: hidden" ref="go"><span></span></div>
</template>

<script>
export default {
  name: "moreList",
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    scrollToTop: function(){
      let top = window.pageYOffset || document.documentElement.scrollTop;// 获取页面滚动高度
      let go = this.$refs.go; // 获取滚动图标
      if(top > 300) {
        this.$nextTick(()=>{
          go.style.visibility = "visible";
        })
      }else if(top < 300) {
          go.style.visibility = "hidden";
      }
    },
    backTop: function(){
      document.documentElement.scrollTop = 0;
    }
  },
  mounted() {
    // 监听页面滚动
    window.addEventListener('scroll',this.scrollToTop);
  },
  destroyed(){
    window.removeEventListener('scroll',this.scrollToTop);
  }
}
</script>

<style scoped>
.backTop {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightseagreen;
  position: fixed;
  right: 5px;
  bottom: 50px;
  display: inline-block;
  z-index: 2;
}

.backTop span {
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-bottom: 20px solid whitesmoke;
  z-index: 3;
  position: fixed;
  right: 14px;
  bottom: 65px;
}
</style>